<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>客户管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="./css/font.css" th:href="@{/xadmin/css/font.css}">
    <link rel="stylesheet" href="./css/xadmin.css" th:href="@{/xadmin/css/xadmin.css}">
    <script src="./lib/layui/layui.js" charset="utf-8" th:src="@{/xadmin/lib/layui/layui.js}"></script>
    <script type="text/javascript" src="./js/xadmin.js" th:src="@{/xadmin/js/xadmin.js}"></script>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>

    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="x-nav">
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <!--预留位置-->
                <div class="layui-card-header">
                    <button class="layui-btn" onclick="xadmin.open('添加客户','customer-add',600,400)"><i
                            class="layui-icon"></i>添加
                    </button>
                </div>
                <div class="layui-card-body layui-table-body layui-table-main" th:if="${page.total != 0}">
                    <table class="layui-table layui-form">
                        <thead>
                        <tr>
                            <th>
                                <input type="checkbox" lay-filter="checkall" name="" lay-skin="primary">
                            </th>
                            <th>ID</th>
                            <th>姓名</th>
                            <th>地址</th>
                            <th>联系电话</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="customer, status:${page.records}">
                            <td>
                                <input type="checkbox" name="id" th:value="${customer.id}" lay-skin="primary">
                            </td>
                            <td>[[${customer.id}]]</td>
                            <td>[[${customer.name}]]</td>
                            <td>[[${customer.address}]]</td>
                            <td>[[${customer.phonenumber}]]</td>
                            <td class="td-manage">
                                <a title="编辑" onclick="xadmin.open('编辑','',600,400)"
                                   href="javascript:;">
                                    <i class="layui-icon">&#xe642;</i>
                                </a>
                                <a title="删除" th:onclick="customerdel(this,[[${customer.id}]])" href="javascript:;">
                                    <i class="layui-icon">&#xe640;</i>
                                </a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="layui-card-body">
                    <div class="page">
                        <nav aria-label="Page navigation">
                            <ul class="pagination">
                                <li>
                                    <a href="#" aria-label="Previous"
                                       th:href="@{/authc/customerlist?(pagenum=${page.current}-1)}"
                                       th:if="${page.current != 1}">
                                        <span aria-hidden="true">&laquo;</span></a>
                                </li>
                                <li><a th:href="@{/authc/customerlist?(pagenum=${page.current}-2)}"
                                       th:if="${page.current}-2 gt '0'" th:text="${page.current}-2">1</a></li>
                                <li><a th:href="@{/authc/customerlist?(pagenum=${page.current}-1)}"
                                       th:if="${page.current}-1 gt '0'" th:text="${page.current}-1">2</a></li>
                                <li class="active"><a th:href="@{/authc/customerlist?(pagenum=${page.current})}"
                                                      th:text="${page.current}" th:if="${page.pages != 0}">1 <span
                                        class="sr-only">(current)</span></a></li>
                                <li><a th:href="@{/authc/customerlist?(pagenum=${page.current}+1)}"
                                       th:if="${page.current}+1 le ${page.pages}" th:text="${page.current}+1">4</a></li>
                                <li><a th:href="@{/authc/customerlist?(pagenum=${page.current}+2)}"
                                       th:if="${page.current}+2 le ${page.pages}" th:text="${page.current}+2">5</a></li>
                                <li>
                                    <a href="#" aria-label="Next" th:href="@{/authc/customerlist?(pagenum=${page.current}+1)}"
                                       th:if="${page.current != page.pages  && page.current == 0}">
                                        <span aria-hidden="true">&raquo;</span></a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    layui.use(['laydate', 'form'], function () {
        var laydate = layui.laydate;
        var form = layui.form;


        // 监听全选
        form.on('checkbox(checkall)', function (data) {

            if (data.elem.checked) {
                $('tbody input').prop('checked', true);
            } else {
                $('tbody input').prop('checked', false);
            }
            form.render('checkbox');
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });


    });

    /*用户-删除*/
    function customerdel(obj, id) {
        layer.confirm('确认要删除吗？', function () {
            //发异步删除数据
            $.get('/sale/authc/customerdelete?id=' + id, function (data) {
                if (data == 1) {
                    $(obj).parents("tr").remove();
                    layer.msg('已删除!', {icon: 1, time: 1000});
                    window.location.href = window.location.href;//自动刷新页面
                } else {
                    layer.msg("删除失败！！！", function () {
                    });
                }
            })
        });
    }


    function delAll(argument) {
        var ids = [];

        // 获取选中的id
        $('tbody input').each(function (index, el) {
            if ($(this).prop('checked')) {
                ids.push($(this).val())
            }
        });


        layer.confirm('确认要删除吗？', function (index) {
            //捉到所有被选中的，发异步进行删除
            $.get('/sale/authc/batchdelete?ids=' + ids.toString(), function (data) {
                if (data == 1) {
                    layer.msg('批量删除成功！', {icon: 1});
                    $(".layui-form-checked").not('.header').parents('tr').remove();
                    window.location.href = window.location.href;//自动刷新页面
                } else {
                    layer.msg('批量删除失败！', {icon: 1});
                }
            });

        });
    }
</script>
</html>
